<template>
    <h5 style="margin-bottom: 20px;">基础设置模块</h5>
    <div class="base-section">
        <h5 style="margin-bottom:15px;">页面宽度</h5>
        <el-row class="mb-4">
           
            <el-button @click="changeContainerWidth('1200px',3)" :type="num == 3 ? 'primary':''">宽度:1200(小)</el-button>
            <el-button @click="changeContainerWidth('1400px',2)" :type="num == 2 ? 'primary':''">宽度:1400(中)</el-button>
            <el-button @click="changeContainerWidth('1600px',1)" :type="num == 1 ? 'primary':''">宽度:1600(大)</el-button>
            <el-button @click="changeContainerWidth('100%',0)"   :type="num == 0 ? 'primary':''">默认版心</el-button>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
// 导入控制基本类型数据的方法
import { ref  } from 'vue'
// 数据状态管理
import useIndexStore from '../../stores/index'
let indexStore = useIndexStore() 
// 默认
indexStore.setWidth('100%')
// 控制按钮背景高亮
let num = ref(0)
//控制页面宽度的方法
let changeContainerWidth = (w:string,n:number):void => {
    // console.log({w})
    // 修改pinia对象仓库的属性值
    indexStore.setWidth(w)
    // 设置按钮背景高亮
    num.value = n
}
</script>